<!--
    @name: DistributorDataItem
    @author: kahu4
    @date: 2024-01-17 15:50
    @description：DistributorDataItem
    @update: 2024-01-17 15:50
-->
<script setup>

import { distributorDataList } from "@/views/distribution/team/index.data";
import { toRefs } from "vue";
import moment from "moment";

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const {data} = toRefs(props)
</script>

<template>
  <view class="user-item">
    <view class="userinfo-row flex flex-jc__start">
      <image :src="data.avatar" />
      <view class="userinfo flex flex-column flex-jc__sb">
        <view class="username">
          {{ data.nickname }}
          <text class="tag">{{ data.isDistributor === 0 ? '客户' : '分销商' }}</text>
        </view>
        <view class="time">加入时间：{{ moment(data.createTime).format('YYYY-MM-DD') }}</view>
      </view>
    </view>
    <view class="distribution-info-row">
      <view
          class="info-item"
          v-for="distributorData in distributorDataList"
          :key="distributorData.label">
        <view class="title">{{ distributorData.label }}</view>
        <view class="count">{{ data[distributorData.field] || '0' }}</view>
      </view>
    </view>
  </view>
</template>

<style
    scoped
    lang="scss">
.user-item {
  margin-bottom: 16rpx;
  @include usePadding(32, 32);
  background: $white-color;
  border-radius: 15rpx;

  .userinfo-row {
    padding-bottom: 16rpx;
    margin-bottom: 16rpx;
    border-bottom: 1rpx solid $page-bg-color;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      background: #fbfbfb;
    }

    .userinfo {


      .username {
        font-size: 28rpx;
        font-weight: bold;

        .tag {
          @include usePadding(24, 4);
          margin-left: 12rpx;
          color: $primary-color;
          background: #E85A2B12;
          border-radius: 50rpx;
          font-size: 24rpx;
          font-weight: normal;
        }
      }

      .time {
        color: $tips-color;
        font-size: 24rpx;
      }
    }
  }

  .distribution-info-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16rpx;

    .info-item {
      @include usePadding(16, 16);
      border-radius: 15rpx;
      background: #f6f6f6;
      color: #7A7A7A;
      font-size: 24rpx;

      .title {
        white-space: nowrap;
      }

      .count {
        color: #333;
        font-weight: bold;
      }
    }
  }

}

</style>
